<template>
 
   
  <div class="question-container">
    <div class="container">
      <el-card v-loading="loading">
        <el-row type="flex">
          <el-col :span="20">
            <span class="font" style="margin-left: 25px">关键字</span>
            <el-input
              v-model="form.keyword"
              placeholder="根据编号搜索"
              style="width: 260px"
            ></el-input>
          </el-col>
          <el-col :span="4">
            <template>
              <el-button size="small" @click="clearInputValue">清除</el-button>
              <el-button
                size="small"
                type="primary"
                @click="searchBaseInputValue"
                >搜索</el-button
              >
            </template>
          </el-col>
        </el-row>
        <el-alert type="info" show-icon style="margin-top: 15px"
          ><template #title>
            数据一共{{ total }}条</template></el-alert
        >
        <template>
          <el-table :data="tableData">
            <el-table-column prop="id" label="编号" width="260">
            </el-table-column>
            <el-table-column label="题型" width="80">
              <template #default="{ row }">
                {{
                  questionType.find((item) => item.value === +row.questionType)
                    .label
                }}
              </template>
            </el-table-column>
            <el-table-column label="项目编号" width="260">
              <template #default="{ row }">
                <div v-for="item in row.questionIDs" :key="item.number">
                  <a
                    href="#"
                    style="color: #09f"
                    @click.prevent="openRandomDialog(item)"
                    >{{ item.number }}</a
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" width="180" label="录入时间">
            </el-table-column>
            <el-table-column prop="totalSeconds" label="答题时间(s)">
            </el-table-column>
            <el-table-column prop="accuracyRate" label="正确率(%)">
            </el-table-column>
            <el-table-column prop="userName" label="录入人"> </el-table-column>
            <el-table-column prop="address" label="操作">
              <template #default="{ row }">
                <el-button
                  @click="delRandomById(row)"
                  circle
                  plain
                  type="danger"
                  title="删除"
                  icon="el-icon-delete"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          style="float: right; margin: 18px 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.pagesize"
          layout="  prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
        <random-dialog ref="RandomDialog" :question="question"></random-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import RandomDialog from "@/module-hmmm/components/random-dialog";
import { questionType } from "@/api/hmmm/constants";
import { randoms, removeRandoms } from "@/api/hmmm/questions.js";
export default {
  name: "Randoms",
  data() {
    return {
      form: {
        keyword: "",
        page: 1,
        pagesize: 20,
      },
      question: {},
      tableData: [],
      total: null,
      loading: false,
      id: 1,
      questionType: questionType,
      // showRandomDialog: false,
    };
  },
  created() {
    this.getRandoms();
  },
  methods: {
    openRandomDialog(question) {
      this.question = question;
      console.log(this.question, 888);
        this.$refs.RandomDialog.showRandomDialog = true;
 
    },
    delRandomById(id) {
      this.$confirm("此操作将永久删除该题组?", "提示")
        .then(async () => {
          console.log(id);
          const res = await removeRandoms(id);
          console.log(res);
          this.$message.success("删除成功");
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--;
          }

          this.getRandoms();
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    async searchBaseInputValue() {
      const { data } = await randoms(this.form);
      // console.log(data,999)
      this.total = data.counts;
      this.tableData = data.items;
      this.page = 1;
    },
    clearInputValue() {
      this.form.keyword = "";
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.form.pagesize = val;
      this.form.page = 1;
      this.getRandoms();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.form.page = val;
      this.getRandoms();
    },
    async getRandoms() {
      this.loading = true;
      const { data } = await randoms(this.form);
      // console.log(this.page, this.pagesize)
      console.log(data);
      // this.id = data.items.id
      this.tableData = data.items;
      this.total = data.counts;
      this.loading = false;
    },
  },
  computed: {},
  components: {
    RandomDialog,
  },
};
</script>

<style scoped lang='scss'>
.question-container {
  padding: 0 10px;
  margin: 10px 0;
  .font {
    margin-right: 20px;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>
